<template>
  <ul @click="$emit('play-list',songObj)" v-if="songObj">
    <li
      @click="jumpPlay(track.id)"
      v-for="(track, index) in songObj.tracks || songObj"
      :key="track.id"
    >
      <div class="leftIndex" :class="{red:index<=2}">
        <span>{{ count(index) }}</span>
      </div>
      <div class="information">
        <h4>
          {{ track.name }}
        </h4>
        <p class="grayAlia" >
          <span class="ar-name" v-for="ar in track.ar||track.song.artists" :key="ar.id">{{
            ar.name
          }}</span>
          <!-- <span>{{ track.song ? track.song.album.name : track.al.name }}</span> -->
          <span>{{ track.al ? track.al.name : track.song.album.name }}</span>
        </p>
      </div>
      <span v-if="track.id != songId" class="bgPlay"></span>
      <div v-else class="play-pause">
        <span :class="{ running: playing, pause: !playing }"></span>
        <span :class="{ running: playing, pause: !playing }"></span>
        <span :class="{ running: playing, pause: !playing }"></span>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    songObj: [Object,Array],
    playing:Boolean,
    NewesArr:Array,
    songId:Number,
  },
  // data(){
  //   return {
  //     isCurrent:false,
  //   }
  // },
  methods: {
    jumpPlay(id) {
      this.$emit("play-audio", id);
    },
    count(num){
      if((num+1)<10){
        return "0"+(num+1)
      }else{
        return num+1;
      }
    }
  },
};
</script>

<style lang="less" scoped>
@keyframes myplay {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}
ul {
  background-color: white;
}
li {
  text-align: left;
  display: flex;
  justify-content: space-between;
  padding: 5px;
  padding-left: 45px;
  border-bottom: 1px solid #ebebeb;
  position: relative;
  align-items: center;
  height:8vh;

  div:first-of-type {
    padding: 0px 15px 0px 10spx;
    align-self: center;
  }

  .bgPlay {
    background: url('../assets/music.png') no-repeat -48px 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-self: center;
    transform: scale(0.6);
  }
  .play-pause {
    display: flex;
    align-items: center;
    margin-right: 13px;
    span {
      width: 4px;
      height: 20px;
      background-color: green;
      margin-left: 2px;
      position: relative;
      display: block;
      transform-origin: bottom;
      animation: myplay 0.9s linear infinite alternate;
      &.running {
        animation-play-state: running;
      }
      &.pause {
        animation-play-state: paused;
      }
    }
    span:nth-of-type(1) {
      animation-delay: -0.9s;
    }
    span:nth-of-type(2) {
      animation-delay: -0.6s;
    }
    span:nth-of-type(3) {
      animation-delay: -0.3s;
    }
  }
  .leftIndex {
    position: absolute;
    top: 20px;
    left: 15px;
    color: #a1a6bd;
    &.red{
      color: #df3490;
    }
  }
}
div.firstThree {
  color: #e13470;
}
.information {
  display: flex;
  flex-direction: column;
  flex: 1;

  h4 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
  }
  .grayAlia {
    color: #888897;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;

    .ar-name::after {
      content: " - ";
    }
    // .ar-name {
    //   &::after {
    //     content: " / ";
    //   }
    //   &:last-of-type {
    //     &::after {
    //       content: " - ";
    //     }
    //   }
    // }
  }

  p {
    display: flex;
    font-size: 12px;
    span {
      align-self: center;
    }
  }
}
.sq {
  background: url(../images/music.png) no-repeat 0 0;
  width: 24px;
  height: 16px;
  display: block;
  margin-right: 5px;
  transform: scale(0.6);
}
</style>